<div class="hero">
  
  <h1>react-day-picker</h1>
  <h2>Date picker component for <a href="https://facebook.github.io/react/">React</a></h2>

  <p class="hero-features">
    no dependencies ● fully customizable ● ARIA support ● localizable ● less than 8KB
  </p>  

  <p class="hero-action">
    <a href="/docs">Read the docs</a>
    <a href="/examples">Browse the examples</a>
  </p>

  <a class="github-button" href="https://github.com/gpbl/react-day-picker" data-icon="octicon-star" data-show-count="true" aria-label="Star gpbl/react-day-picker on GitHub">Star</a>

</div>

<div class="features">
  <div class="feature">
    <h3>Style days with modifiers</h3>
    <picture><a href="/examples/modifiers.html"><img src="../images/demo-modifiers.png" width="200" /></a></picture>
    <p>
      Define the disabled or selected days and change the aspect of each day cell with <a href="/docs/modifiers.html">modifiers</a>.
    </p>
  </div>

  <div class="feature">
    <h3>Works with input fields</h3>
    <picture><a href="/examples/input-advanced.html"><img src="../images/demo-input.png" width="200" /></a></picture>
    <p>
      Display the date picker in an overlay using the <a href="/docs/input.html">DayPickerInput</a> component.
    </p>
  </div>

  <div class="feature">
    <h3>Localizable</h3>
    <picture><a href="/examples/localization.html"><img src="../images/demo-localization.png" width="200" /></a></picture>
    <p>
      Use your own translation strings or import those from moment.js (if you use it).
    </p>
  </div>

  <div class="feature">
    <h3>Select range of days</h3>
    <picture><a href="/examples/selecting-range.html"><img src="../images/demo-range.png" width="200" /></a></picture>
    <p>
      Specify which days should be selected in your component's state.
    </p>
    <p>
      ...and <a href="/examples">much more</a>!
    </p>
  </div>

</div>

<div class="getting-started">
  <h2>Getting started</h2>

  <dl>
    <dt>
      <h3>Install from npm</h3>
      
    </dt>
    <dd>
      <pre><code class="language-bash">npm install react-day-picker --save
# or with yarn
yarn add react-day-picker</code></pre>
      <p>
        <a href="https://www.npmjs.com/package/react-day-picker">
          <img src="https://img.shields.io/npm/v/react-day-picker.svg?style=flat-square" alt="npm version">
        </a>
        <a href="http://npm-stat.com/charts.html?package=react-day-picker">
          <img src="https://img.shields.io/npm/dm/react-day-picker.svg?style=flat-square" alt="npm downloads">
        </a>
        <a href="https://circleci.com/gh/gpbl/react-day-picker">
          <img src="https://img.shields.io/circleci/project/github/gpbl/react-day-picker/master.svg?style=flat-square" alt="circleci">
        </a>
        <a href="https://codecov.io/gh/gpbl/react-day-picker">
          <img src="https://img.shields.io/codecov/c/github/gpbl/react-day-picker/master.svg?style=flat-square" alt="npm downloads">
        </a>
      </p>
    </dd>
  </dl>
  <dl>
    <dt>
      <h3>Import in your component</h3>
    </dt>
    <dd>
        <pre><code class="language-jsx">import React from 'react';

import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

export default function MyComponent() {
  return &lt;DayPicker month={ new Date(2018, 8)} /&gt;
}</code></pre>

      <p>
        Start hacking it on <a href="https://codesandbox.io/s/XDAE3x0W8">this CodeSandbox</a>.
      </p>
    </dd>
  </dl>    

</div>
